
<template>
    <div class="wrapper">
        <slider class="slider" auto-play="true" interval="5000" @change="onchange">
            <div class="frame" v-for="(img,index) in imageList" :key="index">
                <image class="image" resize="cover" :src="img.src"></image>
                
            </div>
        </slider>
        <div class="x-title" :style="{backgroundColor:'rgba(0,0,0,0.7)',opacity : .98}">
            <text class="x-title-text iconfont">&#xe615;{{topic}}</text>
            <div class="x-inder">
                <text class="x-item" :style="{backgroundColor:'rgba(255,255,255,'+index0+')'}"></text>
                <text class="x-item" :style="{backgroundColor:'rgba(255,255,255,'+index1+')'}"></text>
                <text class="x-item" :style="{backgroundColor:'rgba(255,255,255,'+index2+')'}"></text>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .iconfont {
        font-family:iconfont;
    }
    .image {
        width: 750px;
        height: 352px;
    }
    .slider {
        width: 750px;
        height: 352px;
    }
    .frame {
        width: 750px;
        height: 352px;
        position: relative;
    }
    .x-title {
        position: absolute;
        bottom: 0;
        width: 750px;
        height: 50px;
        background-color: black;
        opacity: 0.5;
        padding-left: 20px;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    .x-title-text {
        color: #fff;
        font-size: 26px;
        flex: 1;
    }
    .x-inder {
        width: 130px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .x-item {
        flex: 1;
        height: 8px;
        margin-right:10px;
    }
</style>
<script>
    export default {
        props:["imageList","topic"],
        data () {
            return {
                index0:1,
                index1:0.5,
                index2:0.5,
            }
        },
        methods: {
            onchange (event) {
                if(event.index==0){
                    this.index0 = 1;
                    this.index1 = 0.5;
                    this.index2 = 0.5;
                }else if(event.index==1){
                    this.index0 = 0.5;
                    this.index1 = 1;
                    this.index2 = 0.5;
                }else if(event.index==2){
                    this.index0 = 0.5;
                    this.index1 = 0.5;
                    this.index2 = 1;
                }
            }
        }
    }
</script>